<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery.js"></script>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts-all-3.js"></script>
</head>
<body>
<h1 style="text-align: center">2021年各类型购买统计数据表</h1>
<div id="main" style="width: 950px;height:400px;" ></div>
<script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var newArr = [];
    var summary =[];
    $(function () {
        $.get("summary/findSummary",{},function (data1) {
            $.each(data1, function (index, val) {
                newArr.push(val.cname)
                summary.push(val.altogether)
            });
            getData();
        })
    })
    function getData() {

        option = {
            xAxis: {
                type: 'category',
                data: newArr
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: summary,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    }
</script>
</body>
</html>